<template>
  <h3>姓名:{{ user.name }}</h3>
  <h3>年龄:{{ user.age }}</h3>
  <h3>薪水:{{ user.job.salary }}</h3>
  <button @click="changename">更新姓名</button>
  <button @click="user.age++">更新年龄</button>
  <button @click="user.job.salary++">更新薪水</button>
</template>

<script>
import { reactive } from 'vue'
export default {
    setup () {
        // 不要给reactive传入基本类型的数据，解析不了
        // const aa = reactive(111)
        // console.log(aa) // value cannot be made reactive: 111
        const user = reactive({
            name: 'niuniu',
            age: 18,
            job: {
                salary: 100
            }
        })
        console.log(user)
        function changename() {
            user.name = '哈哈哈'
        }
        return {
            user,
            changename
        }
    }
};
</script>

<style>
</style>